<template>
	<view class="content">
		<view class="pagebody">
			<view class="screen_cell">
				<navigator class="sort active">综合排序</navigator>
				<navigator class="sort">销量排序</navigator>
				<navigator class="sort">价格排序</navigator>
				<view class="screen_box" @tap="displayScreen">
					<i class="coolcicon"><img src="/static/img/icon/screen.png"/></i>
					<view class="text">筛选</view>
				</view>
			</view>
			<view class="product-list">
				<goods-Case v-for="(item, index) in goodsList[0].list" :key="index" v-bind:item="item"></goods-Case>
			</view>
		</view>
		
		<!-- 顶部右侧菜单 -->
		<view v-bind:class="['navBarButtonBox',navBarButton ? '' : 'vb','']">
			<view class="h_newlit" v-bind:class="[navBarButton ? 'active' : '','']">
				<view class="em">
					<view class="livs">
						<i class="coolc icon-zhuye"></i> <span>首页</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shangjialiebiaoicon"></i> <span>品牌列表</span>
					</view>
					<view class="livs">
						<i class="coolc icon-fenlei"></i> <span>商品分类</span>
					</view>
					<view class="livs">
						<i class="coolc icon-shipin"></i> <span>视频导购</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部右侧菜单 -->
		
		<!-- 右侧筛选 -->
		<view v-bind:class="['showScreen',showScreen ? 'active' : '','']">
			<view class="maskScreen" @tap="closeScreen"></view>
			<view class="list_class">
				<view class="screen_title">产品分类</view>
				<view class="class_box">
					<text class="span active">护肤</text>
					<text class="span">名表/眼镜</text>
					<text class="span">珠宝配饰/戒指</text>
					<text class="span">女装/内衣</text>
					<text class="span">母婴/童鞋/玩具</text>
					<text class="span">女鞋/男鞋</text>
					<text class="span">男装/衬衫/外套</text>
					<text class="span">箱包/户外</text>
					<text class="span">家电/手机/数码</text>
					<text class="span">家具/家装/厨具</text>
					<text class="span">汽车/游轮/飞机</text>
					<text class="span">食品/酒类/生鲜/特供</text>
				</view>
				<view class="screen_title">品牌</view>
				<view class="class_box">
					<text class="span active">爱马仕</text>
					<text class="span">劳力士</text>
					<text class="span">奥迪</text>
					<text class="span">古驰</text>
					<text class="span">欧米茄</text>
					<text class="span">范思哲</text>
					<text class="span">巴宝莉</text>
					<text class="span">香奈儿</text>
					<text class="span">普拉达</text>
					<text class="span">路易威登</text>
					<text class="span">纪梵希</text>
					<text class="span">百达翡丽</text>
				</view>
				<view class="screen_title">价格区间</view>
				<view class="class_box">
					<text class="span active">100~500</text>
					<text class="span">500~1000</text>
					<text class="span">1000~2000</text>
					<text class="span">2000~3000</text>
					<text class="span">3000~4000</text>
					<text class="span">4000~6000</text>
					<text class="span">6000~8000</text>
					<text class="span">8000~10000</text>
					<text class="span">10000~20000</text>
				</view>
				<view class="screen_title">筛选</view>
				<view class="class_box">
					<checkbox-group>
						<label>
							<checkbox value="cb" checked="true" />包邮
						</label>
						<label>
							<checkbox value="cb" />商场同款
						</label>
						<label>
							<checkbox value="cb" />推荐产品
						</label>
					</checkbox-group>
				</view>
				
				<view class="btn_list_box">
					<button type="default" class="close" @tap="closeScreen">取消</button>
					<button type="warn" class="ok">确认筛选</button>
				</view>
			</view>
		</view>
		
		<!-- 右侧筛选 -->
		
	</view>
</template>

<script>
	import goodsCase from '@/components/goods-case';
	import {  
		mapState 
	} from 'vuex';  
   export default {
		components: {
			goodsCase,
		},
		data(){
			return {
				goodsList: [{}, {}],
				navBarButton:false,
				showScreen:false,
			}
		},
        onBackPress() {
        	if (this.showScreen) {
        		this.showScreen = false;
        		return true;
        	}
        },
		onLoad(){
			this.loadData();
			setTimeout(()=> {
				this.renderImage = true;
			}, 300);
		},

		onNavigationBarButtonTap:function(){
			this.navBarButton = !this.navBarButton; 
		},
        methods: {
			async loadData() {
				let goodsList = await this.$api.json('goodsList');
				this.goodsList = goodsList;
			},
            closeScreen: function() {
                this.showScreen = false;
            },
            displayScreen: function() {
                this.showScreen = true;
            },
		}
    }  
</script>

<style lang="scss">
page { height:calc(100%) - var(--window-bottom)!important; background:$bgcolor_white; }
</style>